<template>
  <div>
    <h1>逻辑服用（方法复用）</h1>
    <div v-if="isLoading">loading...</div>
    <div v-else>loaded</div>
    <hr />
    <button @click="changeLoading">控制加载</button>
  </div>
</template>

<script>
import { useLoading } from '@/hook'
/**
 * vue3逻辑复用步骤：
 * 1. 根据功能去抽离函数
 * 2. 在抽离的函数中定义data变量+修改data的方法
 * 3. 这个函数可以根据需要单独放到一个js中导出
 */
export default {
  setup () {
    console.log(useLoading)
    const { isLoading, changeLoading } = useLoading()
    // 控制是否loading
    // const isLoading = ref(true)
    // const changeLoading = () => {
    //   isLoading.value = !isLoading.value
    // }
    return { isLoading, changeLoading }
  }
}
</script>

<style  scoped>
.red {
  color: red;
}
</style>
